<template>
  <div>
    <el-drawer :append-to-body="true" :size="size" :title="title" :visible.sync="drawer" :direction="direction">
      <div class="drawer">
        <slot></slot>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: 'MsuiDrawer',
  props: {
    size: {
      type: String,
      default: '50%'
    }
  },
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      title: '标题'
    };
  }
};
</script>

<style scoped>
.drawer {
  padding: 0 100px;
  margin: 0 auto;
  height: 100%;
}

::v-deep .el-drawer__header {
  border-bottom: 1px solid #aba7a7;
  padding: 12px;
  background: #3c8dbc;
  color: white;
}
::v-deep .el-drawer__body {
  overflow: auto;
}
</style>